<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高阶函数_函数柯里化</title>
    <!-- 引入 react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom 用于支持操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入 babel 用于将 jsx转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
</head>
<body>
<div id="test"></div>

<script type="text/babel">

    /**
     *  高阶函数: 如果一个函数符合下面两个规范中的任何一个，那么该函数就是高阶函数
     *  1. 若A函数, 接收的参数是一个函数，那A就可以称之为高阶函数
     *  2. 若A函数, 调用的返回值依然是一个函数，那A就可以称之为高阶函数
     *  常见的高阶函数有： Promise，setTimeout  arr.map ...
     *
     *  函数柯里化：
     *      通过函数调用【继续返回函数】的方式，实现多次接收参数最后统一处理的 【函数编码方式】
     *
     *  案例：
     *  function sum(a) {
     *         return (b) => {
     *             return (c) => {
     *                 return a + b + c
     *             }
     *         }
     *     }
     *
     *     const result = sum(1)(2)(3)
     *
     */

    class Login extends React.Component {

        // 初始化状态
        state = {
            username: '',
            password: ''
        }

        /**
         * saveFormData 的返回值(匿名函数)作为 onChange 事件的回调函数
         */
        saveFormData = (dataType) => {
            console.log(dataType);
            return (event) => {
               // console.log(dataType, event.target.value);
                this.setState({[dataType]: event.target.value})
            }
        }

        // 表单提交事件处理函数
        handleSubmit = (event) => {
            // 阻止默认 表单提交事件 跳转
            event.preventDefault();
            const {username, password} = this.state;
            alert(`你输入的用户名是:${username}, 密码是 ${password}`);
        }

        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    用户名: <input onChange={this.saveFormData('username')} type="text" name="username"/> &nbsp;
                    密码: <input onChange={this.saveFormData('password')} type="password" name="password"/> &nbsp; &nbsp;
                    <button>登录</button>
                </form>
            )
        }
    }

    ReactDOM.render(<Login/>, document.getElementById("test"));
</script>
</body>
</html>